<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="
        width: 600px;
        height: 270px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="recordId" width="50"> </el-table-column>
      <el-table-column property="recordName" label="日志内容 " width="420">
      </el-table-column>
      <el-table-column property="recordTime" label="日期" width="120">
      </el-table-column>
    </el-table>

       <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 50px"
        >
        </el-pagination>

        <div style="margin: 20px 100px">

        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 200px">
            <legend>查询日志信息</legend>
            <form action="">
                起始日期： <input type="date" name="" id="" v-model="startDate">
                <br>
                结束日期： <input type="date" name="" id="" v-model="endDate">
              <input
                type="button"
                value="查找"
                @click="get()"
                style="margin: 20px"
              />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      recordId: "",
      recordName: "",
      startDate: "",
      endDate:"",
      recordTime: "",
      recordList: [],
    };
  },
  computed: {
    ...mapState("record", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("record", ["setParam"]),
    ...mapActions("record", ["findByItem"]),
    get() {

      let paramObj = this.param;
      paramObj.startDate = this.startDate;
      paramObj.endDate = this.endDate;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.userId);

      this.userId = row.userId;
    },
    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>